import React from 'react';
import ReactEChart from './ReactEChart';

const getConfig = ({ colors, serieNames, serieDatas, isArea = true }) => {
  console.log(`44`,colors, serieNames, serieDatas);
  const series = serieDatas.map((serieData, i) => {
    const data = serieData.map(item => [new Date(item[0]).getTime(), item[1]]);
    return {
      name: serieNames[i],
      type: 'line',
      symbol: 'circle',
      showSymbol: true,
      itemStyle: {
        normal: {
          color: colors[i],
        },
      },
      areaStyle: isArea && {
        normal: {
          opacity: 0.75,
        },
      },
      smooth: true,
      data,
    };
  });

  return {
    title: {
      text: '',
    },
    grid: {
      left: '12%',
      right: '5%',
    },
    xAxis: {
      type: 'time',
      splitNumber: 5,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e6e6e6',
        },
      },
      axisLine: {
        lineStyle: {
          color: '#ccd6eb',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#888',
        },
      },
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '50%'],
      splitNumber: 3,
      splitLine: {
        lineStyle: {
          color: '#e6e6e6',
        },
      },
      axisLine: {
        lineStyle: {
          color: '#ccd6eb',
        },
      },
      axisLabel: {
        margin: 8,
        textStyle: {
          color: '#888',
        },
        formatter: function (value, index) {
          if (Math.abs(value) >= 100000) {
            return (value / 10000).toFixed(0) + '万';
          } else {
            return value;
          }
        },
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: serieNames,
      bottom: 5,
      selectedMode: false,
    },
    series,
  };
};

const AreaChart = (props) => {
  const config = getConfig(props);
  const height = props.height || 220;
  return (
    <div style={{ marginBottom: 20, height }} >
      <ReactEChart config={config} />
    </div>
  );
};

AreaChart.propTypes = {
};

export default AreaChart;
